<template>
<div>
    <div class="header">
            <img src="../assets/images/confirm_order_03.png" alt="confirm_order_03.png">确认订单
        </div>
        <div class="middle">
            <div>古天乐<span>187****6789</span></div>
            <div>广东省广州市天河区中山大道西99号</div>
            <img src="../assets/images/confirm_order3_03.png" alt="confirm_order3_03.png">
        </div>
        <div class="blank"></div>
        <div class="main">
            <div class="producto">
                <img src="../assets/images/confirm_order_06.png" alt="confirm_order_06.png">
                <div class="detail">
                      <div class="one">NBR瑜伽垫 加大加厚加长防滑瑜伽垫</div>        
                      <div class="two">规格：150cm  蓝色<span>数量：1</span></div>                
                      <div class="thr"><span>￥188.00</span>免运费</div>  
                </div>              
            </div>
            <div class="productt">
                <img src="../assets/images/confirm_order_06.png" alt="confirm_order_06.png">
                 <div class="detail">
                      <div class="one">珠光瑜伽球直径75cm健身球 环保磨砂大龙球</div>        
                      <div class="two">规格：75cm  紫色<span>数量：1</span></div>                
                      <div class="thr"><span>￥199.00</span>免运费</div>  
                </div>                    
            </div>
            <ul>
              <li>
                配送方式
                <span>顺丰快递</span>
              </li>
              <li>
                发票
                <span>个人</span>
              </li>
              <li>
                优惠券
                <span>无可用</span>
              </li>
               <li>
                 商品金额
                <span>￥387.00</span>
              </li>
              <li>
                运费
                <span>￥0.00</span>
              </li>
            </ul>
        </div>
        <div class="base"></div>
        <div class="footer">
            实付款：
            <i>￥387.00</i>
            <span>提交订单</span>
          
        </div>
    </div>  
</template>
<script>
export default {
  name: "ConfirmPage",
  data() {
    return {
      msg: "hello"
    };
  }
};
</script>

<style scoped lang="less">
h1 {
  color: blueviolet;
}
.header {
  background: #ff8f00;
  overflow: hidden;
  line-height: 90px;
  font-size: 40px;
  color: #ffffff;
  text-align: center;
  padding: 0  44px 0 20px;
  img {
    float: left;
    width: 24px;
    height: 44px;
    margin-top: 23px;
  }
}
.middle {
  overflow: hidden;
  div {
    font-size: 30px;
    float:left;   
    margin-left: 78px;
    line-height: 60px;
    span{
      margin-left: 228px;
    }
  }
  img{
    float:right;
    width:17px;
    height:32px;
    margin-top: -16px;
    margin-right: 20px;
  }
}
.blank{
  height:28px;
background-color: #e6e6e6;
}
.base{
  height:204px;
background-color: #e6e6e6;
}
.main{
  .producto{
    overflow: hidden;
    border-bottom:1px solid #e5e5e5;
    margin-bottom: 20px;
      img{
        width:200px;
        height:200px;
        float:left;
      }
      .detail{ 
        float:left;
        margin-left: 38px;
        width:468px;
        
        .one{
          font-size:36px;
          margin-top: 18px;
          margin-bottom: 52px;
         }
      .two{
        font-size:24px;
        margin-bottom: 22px;
          span{
            margin-left: 176px;
          }
      }
      .thr{
        font-size:24px;
        margin-bottom: 20px;
          span{
            margin-right: 256px;
            color:#f20d0d;
          }
      }
      }     
  }
  .productt{
    overflow: hidden;
    padding-top: 20px;
    border-bottom: 1px solid #e5e5e5;
    border-top:1px solid #e5e5e5;
      img{
        width:200px;
        height:200px;
        float:left;
      }
      .detail{ 
        float:left;
        margin-left: 38px;
        width:468px;
        .one{
          font-size:36px;
          margin-top: 18px;
          margin-bottom: 52px;
         }
      .two{
        font-size:24px;
        margin-bottom: 22px;
          span{
            margin-left: 176px;
          }
      }
      .thr{
        font-size:24px;
        margin-bottom: 16px;
          span{
            margin-right: 256px;
            color:#f20d0d;
          }
      }
      }     
  }
  ul{
    margin-top: 50px;
    li{
      font-size: 30px;
      margin-bottom: 18px;
      span{
float:right;
      }
    }
  }
}
.footer{
  line-height: 80px;
  font-size:36px;
  i{
    color:#f20d0d;
    margin-right: 210px;
  }
  span{
    width:212px;
    background:#f20d0d;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    color:#ffffff;
  }
}
</style>